<template>
	<div>
		<textarea :id="Id"></textarea>
	</div>
</template>

<script>
import { Session } from '/@/utils/storage';
export default {
	data() {
		const Id = "edit" + Date.now();
		return {
			Id: Id,
			Editor: null,
			isLoad: false,
			DefaultConfig: {
				// GLOBAL
				height: 500,
				theme: "modern",
				menubar: false,
				toolbar: `styleselect | formatselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | image table | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist |  removeformat  hr | paste code preview  | undo redo `,
				plugins: `paste importcss image code table advlist lists textcolor colorpicker hr preview`,
				// CONFIG
				forced_root_block: "p",
				force_p_newlines: true,
				importcss_append: true,
				// CONFIG: ContentStyle 这块很重要， 在最后呈现的页面也要写入这个基本样式保证前后一致， `table`和`img`的问题基本就靠这个来填坑了
				content_style: `*                         { padding:0; margin:0; }
								html, body                { height:100%; padding:0px 8px; }
								img                       { max-width:100%; display:block;height:auto; }
								a                         { text-decoration: none; }
								iframe                    { width: 100%; }
								p                         { line-height:1.6; margin: 0px; }
								table                     { word-wrap:break-word; word-break:break-all; max-width:100%; border:none; border-color:#999; }
								.mce-object-iframe        { width:100%; box-sizing:border-box; margin:0; padding:0; }
								ul,ol                     { list-style-position:inside; }`,
				insert_button_items: "image link | inserttable",
				// CONFIG: Paste
				paste_retain_style_properties: "all",
				paste_word_valid_elements: "*[*]", // word需要它
				paste_data_images: true, // 粘贴的同时能把内容里的图片自动上传，非常强力的功能
				paste_convert_word_fake_lists: false, // 插入word文档需要该属性
				paste_webkit_styles: "all",
				paste_merge_formats: true,
				nonbreaking_force_tab: false,
				paste_auto_cleanup_on_paste: false,
				// CONFIG: Font
				fontsize_formats: "10px 11px 12px 14px 16px 18px 20px 24px",
				// CONFIG: StyleSelect
				style_formats: [
					{
						title: "首行缩进",
						block: "p",
						styles: { "text-indent": "2em" }
					},
					{
						title: "行高",
						items: [
							{ title: "1", styles: { "line-height": "1" }, inline: "span" },
							{
								title: "1.5",
								styles: { "line-height": "1.5" },
								inline: "span"
							},
							{ title: "2", styles: { "line-height": "2" }, inline: "span" },
							{
								title: "2.5",
								styles: { "line-height": "2.5" },
								inline: "span"
							},
							{ title: "3", styles: { "line-height": "3" }, inline: "span" }
						]
					}
				],
				// Tab
				tabfocus_elements: ":prev,:next",
				object_resizing: true,
				// Image
				imagetools_toolbar:
					"rotateleft rotateright | flipv fliph | editimage imageoptions"
			}
		}
	},
	props: {
		value: {
			default: "",
			type: String
		},
		config: {
			type: Object,
			default: () => {
				return {
					theme: "modern",
					height: 300
				};
			}
		},
		url: {
			default: "",
			type: String
		},
		accept: {
			default: "image/jpeg, image/png",
			type: String
		},
		maxSize: {
			default: 2097152,
			type: Number
		},
		withCredentials: {
			default: true,
			type: Boolean
		}
	},
	mounted() {
		this.init();
	},
	beforeDestroy() {
		// 销毁tinymce
		this.$emit("on-destroy");
		window.tinymce.remove(`#${this.Id}`);
	},
	methods: {
		// 获取内容
		getContent() {
			return window.tinyMCE.editors[`${this.Id}`].getContent();
		},
		init() {
			const self = this;
			this.Editor = window.tinymce.init({
				// 默认配置
				...this.DefaultConfig,
				// 图片上传
				images_upload_handler: function (blobInfo, success, failure) {
					if (blobInfo.blob().size > self.maxSize) {
						failure("文件体积过大");
					}

					if (self.accept.indexOf(blobInfo.blob().type) >= 0) {
						uploadPic();
					} else {
						failure("图片格式错误");
					}
					function uploadPic() {
						const xhr = new XMLHttpRequest();
						const formData = new FormData();
						xhr.withCredentials = self.withCredentials;
						xhr.open("POST", self.url);
						xhr.setRequestHeader("Authorization", Session.get('token'));
						xhr.onload = function () {
							if (xhr.status !== 200) {
								// 抛出 'on-upload-fail' 钩子
								self.$emit("on-upload-fail");
								failure("上传失败: " + xhr.status);
								return;
							}
							const json = JSON.parse(xhr.responseText);
							let imgUrl = `${import.meta.env.VITE_PHOTO_API_URL}/COMMON-SERVICE/public/mongo/gridfs/showFile?_id=${json.data}`;
							success(imgUrl);
						};
						formData.append("file", blobInfo.blob());
						formData.append("remark", "文章");
						formData.append("fileAuthRange", "public");
						xhr.send(formData);
					}
				},
				// prop内传入的的config
				...this.config,
				// 挂载的DOM对象
				selector: `#${this.Id}`,
				setup: editor => {
					// 抛出 'on-ready' 事件钩子
					editor.on("init", () => {
						self.$emit("on-ready");
						this.isLoad = true;
						if (self.value) {
							editor.setContent(self.value);
						}
					});
				}
			});
		}
	},
	watch: {
		value() {
			let self = this;
			if (this.isLoad) {
				window.tinymce.editors[this.Id + ""].setContent(this.value || "");
			}
		}
	}
}

</script>